.docs-wrapper:root,
.blog-wrapper:root {
    --primary-font-sans: "Inter";
}

/* Firefox */
.scrollbar-slim {
    scrollbar-width: thin;
    scrollbar-color: red blue;
}

/* Chrome, Edge, and Safari */
.scrollbar-slim::-webkit-scrollbar {
    width: 12px;
}

.scrollbar-slim::-webkit-scrollbar-track {
    background: #14141f;
    border-radius: 5px;
}

.scrollbar-slim::-webkit-scrollbar-thumb {
    background-color: #303450;
    border-radius: 12px;
    border: 3px solid #14141f;
}

.refine-prose {
    max-width: 100% !important;
    @apply prose prose-invert font-normal;
    @apply 2xl:prose-base;
    @apply prose-strong:dark:text-gray-300 prose-strong:text-gray-700;
    @apply prose-a:text-refine-link-light prose-a:dark:text-refine-link-dark  prose-a:font-normal;

    @apply prose-h1:font-semibold;
    @apply prose-h1:text-gray-900 prose-h1:dark:text-gray-0;
    @apply prose-h1:text-[1.25rem] prose-h1:leading-[1.75rem];
    @apply sm:prose-h1:text-[2.5rem] sm:prose-h1:leading-[3rem];
    @apply prose-h1:mb-4 sm:prose-h1:mb-8;

    @apply prose-h2:font-semibold;
    @apply prose-h2:text-gray-800 prose-h2:dark:text-gray-100;
    @apply prose-h2:text-[1rem] prose-h2:leading-[1.5rem];
    @apply sm:prose-h2:text-[2rem] sm:prose-h2:leading-[2.5rem];
    @apply prose-h2:mb-4 sm:prose-h2:mb-6;

    @apply prose-h3:font-semibold;
    @apply prose-h3:text-gray-700 prose-h3:dark:text-gray-200;
    @apply prose-h3:text-[0.875rem] prose-h3:leading-[2.5rem];
    @apply sm:prose-h3:text-[1.5rem] sm:prose-h3:leading-[2rem];
    @apply prose-h3:mb-4 sm:prose-h3:mb-6;

    @apply prose-h4:font-semibold;
    @apply prose-h4:text-gray-600 prose-h4:dark:text-gray-300;
    @apply prose-h4:text-[0.75rem] prose-h4:leading-[1rem];
    @apply sm:prose-h4:text-[1rem] sm:prose-h4:leading-[1.75rem];
    @apply prose-h4:mb-4 sm:prose-h4:mb-6;

    @apply prose-p:dark:text-gray-300 prose-p:text-gray-700 prose-p:mb-5 prose-p:mt-0;
    @apply prose-p:text-base sm:prose-p:leading-7;

    @apply prose-li:text-sm sm:prose-li:text-base;
    @apply prose-li:my-0 2xl:prose-li:text-base;
    @apply prose-ul:pl-8 prose-ul:ml-0 prose-ul:dark:text-gray-300 prose-ul:text-gray-700;
    @apply prose-ol:pl-8 prose-ol:ml-0 prose-ol:dark:text-gray-300 prose-ol:text-gray-700;

    @apply prose-blockquote:last:mb-0 prose-blockquote:border-l-4 prose-blockquote:rounded-lg prose-blockquote:p-4 prose-blockquote:font-normal prose-blockquote:not-italic;
    @apply prose-blockquote:bg-gray-50 prose-blockquote:text-gray-700 prose-blockquote:border-l-gray-400;
    @apply prose-blockquote:dark:bg-gray-800 prose-blockquote:dark:text-gray-0 prose-blockquote:dark:border-l-gray-600;

    @apply prose-code:text-[0.625rem] prose-code:leading-[0.75rem] sm:prose-code:text-[0.75rem] sm:prose-code:leading-[1.0625rem] lg:prose-code:text-[0.875rem] lg:prose-code:leading-[1.125rem];
    @apply prose-code:text-gray-700 prose-code:bg-gray-200;
    @apply prose-code:dark:text-gray-0 prose-code:dark:bg-gray-700;
    @apply prose-code:px-1.5 prose-code:pt-[2px] prose-code:pb-[3px] prose-code:rounded prose-code:font-mono prose-code:before:content-none prose-code:after:content-none;
    @apply prose-code:font-normal;
    @apply prose-code:decoration-clone;
    @apply prose-code:border-none;

    @apply max-w-none;
}

/* .refine-prose *:last-child:not(header h1) {
    margin-bottom: 0;
} */

.refine-prose h1 code,
.refine-prose h2 code,
.refine-prose h3 code {
    font-size: inherit;
    line-height: inherit;
    vertical-align: bottom;
}

.refine-prose blockquote,
.refine-prose blockquote p {
    @apply before:content-none after:content-none;
}

.refine-prose table {
    @apply prose-table:border-none;
}

.refine-prose table tr {
    border-top: unset;
}

.refine-prose table th,
.refine-prose table td {
    @apply border border-gray-200 px-2 py-2 text-gray-900 dark:border-gray-700 dark:text-gray-100;
    @apply text-sm;
}

.refine-prose table th {
    @apply font-semibold text-gray-900 dark:text-gray-200;
    @apply text-sm;
}

.refine-prose table th code {
    @apply text-sm;
}

.refine-prose table tbody tr:nth-child(odd) {
    @apply dark:bg-gray-700 dark:bg-opacity-30;
    @apply bg-gray-50 bg-opacity-10;
}

.refine-prose table tbody tr:nth-child(even) {
    @apply bg-gray-50 dark:bg-gray-900;
}

.refine-prose table thead {
    @apply bg-gray-50 dark:bg-gray-900;
}

.refine-prose table thead tr {
    @apply border-none;
}

.refine-toc-item {
    @apply cursor-pointer;
}

.refine-toc-item code::before,
.refine-toc-item code::after {
    content: "";
}

.refine-toc-item code {
    @apply rounded !border-none py-0.5 px-1 !align-bottom font-mono !text-inherit dark:bg-gray-600 dark:bg-opacity-30 dark:!text-inherit;
    font-size: 12px;
}

a:has(> code) {
    text-decoration: none !important;
}

a:has(> code) code {
    @apply !text-refine-link-light dark:!text-refine-link-dark !align-text-bottom;
}

p:has(> code) code {
    @apply mx-0.5 !align-text-bottom;
}

li a:has(> code) code {
    @apply !mx-0 !align-text-bottom;
}

.admonition.admonition-caution code {
    @apply dark:bg-refine-orange/10 bg-[#F2800D] bg-opacity-[15%] dark:bg-opacity-[15%];
}

.admonition.admonition-caution a {
    @apply dark:text-refine-orange text-[#CC6600];
}

.admonition.admonition-caution a code {
    @apply dark:!text-refine-orange !text-[#CC6600];
}

.admonition.admonition-caution li::marker {
    @apply dark:text-refine-orange text-[#CC6600] text-opacity-50 dark:text-opacity-50;
}

.admonition.admonition-danger code {
    @apply bg-refine-red bg-opacity-[15%];
}

.admonition.admonition-danger a {
    @apply text-refine-red;
}

.admonition.admonition-danger a code {
    @apply !text-refine-red;
}

.admonition.admonition-info code {
    @apply bg-refine-blue/10 bg-opacity-[15%] dark:bg-[#6EB3F7]/10 dark:bg-opacity-[15%];
}

.admonition.admonition-info a {
    @apply text-refine-blue dark:text-refine-link-dark;
}

.admonition.admonition-info li::marker {
    @apply text-refine-blue dark:text-refine-link-dark text-opacity-50 dark:text-opacity-50;
}

.admonition.admonition-tip code {
    @apply bg-refine-green bg-opacity-[15%];
}

.admonition.admonition-tip a {
    @apply text-refine-green;
}

.admonition.admonition-tip a code {
    @apply !text-refine-green;
}

.admonition.admonition-tip li::marker {
    @apply text-refine-green text-opacity-50;
}

.admonition.admonition-note code {
    @apply bg-refine-cyan bg-opacity-[15%];
}

.admonition.admonition-note a {
    @apply text-refine-cyan;
}

.admonition.admonition-note a code {
    @apply !text-refine-cyan;
}

.admonition.admonition-note li::marker {
    @apply text-refine-cyan text-opacity-50;
}

.admonition.admonition-additional code {
    @apply bg-refine-cyan bg-opacity-20;
}

.admonition.admonition-additional a {
    @apply text-refine-cyan;
}

.admonition.admonition-info-tip code {
    @apply bg-refine-blue bg-opacity-20;
}

.admonition.admonition-info-tip a {
    @apply text-refine-blue;
}

.admonition pre.prism-code code {
    @apply bg-transparent;
}

.refine-details > summary + div > div {
    @apply mt-0 border-t-0 pt-0;
}

.refine-details-content {
    @apply p-4;
}

.refine-details .refine-details-content > div > *:last-child {
    @apply !mb-0;
}

.refine-details > summary .refine-details-triangle {
    @apply transition-transform duration-200 ease-in-out;
    @apply -rotate-90;
}

.refine-details[open] > summary .refine-details-triangle {
    @apply rotate-0;
}

.max-w-screen-content {
    @apply max-w-screen-content-sm md:max-w-screen-content-md 2xl:max-w-screen-content-2xl;
}

html .no-underline {
    text-decoration: none;
}

html[data-active-page="index"],
html[data-active-page="index"] body {
    @apply bg-gray-800;
}

@keyframes element-animation {
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    35% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.landing-hero-mobile-svg .auth,
.landing-hero-mobile-svg .backend,
.landing-hero-mobile-svg .framework,
.landing-hero-mobile-svg .platform {
    opacity: 0;
    animation: element-animation 24s infinite;
    will-change: opacity;
}

.landing-hero-mobile-svg .nextjs {
    animation-delay: 0s;
}

.landing-hero-mobile-svg .vite {
    animation-delay: 8s;
}

.landing-hero-mobile-svg .remix {
    animation-delay: 16s;
}

.landing-hero-mobile-svg .mui {
    animation-delay: -3s;
}

.landing-hero-mobile-svg .antd {
    animation-delay: 5s;
}

.landing-hero-mobile-svg .chakra {
    animation-delay: 13s;
}

.landing-hero-mobile-svg .supabase {
    animation-delay: -6s;
}

.landing-hero-mobile-svg .nest {
    animation-delay: 2s;
}

.landing-hero-mobile-svg .appwrite {
    animation-delay: 10s;
}

.landing-hero-mobile-svg .google {
    animation-delay: -9s;
}

.landing-hero-mobile-svg .auth0 {
    animation-delay: -1s;
}

.landing-hero-mobile-svg .strapi {
    animation-delay: 7s;
}

.animation-parent {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000;
}
